<template>
  <div class="container">
    <div class="section">
      <h2 class="title">
        用户详情
      </h2>
      <ul class="info">
        <li class="list-item">
          <div class="tip">
            用户ID：
          </div>
          <div class="detail">
            {{user_detail.userId}}
          </div>
        </li>
        <li class="list-item">
          <div class="tip">
            注册时间：
          </div>
          <div class="detail">
            {{user_detail.createdAt}}
          </div>
        </li>
        <li class="list-item">
          <div class="tip">
            开通会员：
          </div>
          <div class="detail">
            {{user_detail.groupVipAt}}
          </div>
        </li>
        <li class="list-item">
          <div class="tip">
            用户昵称：
          </div>
          <div class="detail">
            {{user_detail.nickname}}
          </div>
        </li>
        <li class="list-item">
          <div class="tip">
            用户姓名：
          </div>
          <div class="detail">
            {{user_detail.realname}}
          </div>
        </li>
        <li class="list-item">
          <div class="tip">
            手机号码：
          </div>
          <div class="detail">
            {{user_detail.username}}
          </div>
        </li>
        <li class="list-item">
          <div class="tip">
            用户类型：
          </div>
          <div class="detail">
            {{user_detail.vip}}
          </div>
        </li>
        <li class="list-item">
          <div class="tip">
            上级姓名：
          </div>
          <div class="detail">
            {{user_detail.parentRealname}}
          </div>
        </li>
        <li class="list-item">
          <div class="tip">
            上级手机号：
          </div>
          <div class="detail">
            {{user_detail.parentUsername}}
          </div>
        </li>
        <li class="list-item">
          <div class="tip">
            累计发起数：
          </div>
          <div class="detail">
            {{user_detail.initiateCount}}
          </div>
        </li>
        <li class="list-item">
          <div class="tip">
            累计参团数：
          </div>
          <div class="detail">
            {{user_detail.participationCount}}
          </div>
        </li>
        <li class="list-item">
          <div class="tip">
            累计成团数：
          </div>
          <div class="detail">
            {{user_detail.groupCount}}
          </div>
        </li>
        <li class="list-item">
          <div class="tip">
            累计核销数：
          </div>
          <div class="detail">
            {{user_detail.writeOffCount}}
          </div>
        </li>
        <li class="list-item">
          <div class="tip">
            累计升单数：
          </div>
          <div class="detail">
            {{user_detail.upgradeOrderCount}}
          </div>
        </li>
        <li class="list-item">
          <div class="tip">
            累计消费：
          </div>
          <div class="detail">
            {{user_detail.consumption}}
          </div>
        </li>
        <li class="list-item">
          <div class="tip">
            绑定下级数：
          </div>
          <div class="detail">
            {{user_detail.bindCount}}
          </div>
        </li>
        <li class="list-item">
          <div class="tip">
            累计收益：
          </div>
          <div class="detail">
            {{user_detail.income}}
            <span class="detail-btn">
              <el-popover placement="right"
                          width="600"
                          trigger="click">
                <el-table :data="income_list"
                          :show-header="false">
                  <el-table-column property="createdAt"
                                   align="center"
                                   width="160"
                                   label="日期"></el-table-column>
                  <el-table-column property="description"
                                   align="center"
                                   label="详情"></el-table-column>
                  <el-table-column property="income"
                                   align="center"
                                   label="金额"></el-table-column>
                </el-table>
                <el-button slot="reference">收益明细</el-button>
              </el-popover>
            </span>
          </div>
        </li>
        <li class="list-item">
          <div class="tip">
            累计提现：
          </div>
          <div class="detail">
            {{user_detail.withdraw}}
            <span class="detail-btn">
              <el-popover placement="right"
                          width="600"
                          trigger="click">
                <el-table :data="withdraw_list"
                          :show-header="false">
                  <el-table-column property="approveTime"
                                   align="center"
                                   width="160"
                                   label="日期"></el-table-column>
                  <el-table-column property="status"
                                   align="center"
                                   label="状态"></el-table-column>
                  <el-table-column property="withdrawalAmount"
                                   align="center"
                                   label="金额"></el-table-column>
                </el-table>
                <el-button slot="reference">提现记录</el-button>
              </el-popover>
            </span>
          </div>
        </li>
        <li class="list-item">
          <div class="tip">
            账户余额：
          </div>
          <div class="detail">
            {{user_detail.balance}}
          </div>
        </li>
        <li class="list-item">
          <div class="tip">
            上次登录：
          </div>
          <div class="detail">
            {{user_detail.lastLoginAt}}
          </div>
        </li>

      </ul>
    </div>

  </div>
</template>
<script>
  import { userDetail, userIncome, userWithdraw } from '../../api/user'

export default {
  data () {
    return {
      gridData: [],
      user_id: '',
      user_detail: {},
      income_list: [],
      withdraw_list: [],
    }
  },
  methods: {
    get_detail () {
      userDetail({
        userId: this.user_id
      }).then((result) => {
        let res = result.data
        if (res.code === 0) {
          if (res.data.income) {
            this.get_income()
          }
          if (res.data.withdraw) {
            this.get_withdraw()
          }
          //   if (res.data.lastLoginAt) {
          //     res.data.lastLoginAt = new Date(res.data.lastLoginAt * 1000).format('yyyy-MM-dd hh:mm:ss')
          //   }
          this.user_detail = res.data
        } else {
          this.$message.error(res.msg);
        }
      }).catch((err) => {
        this.$message.error(err);
      });
    },
    get_income () {
      userIncome( {
        "pageNum": 1,
        "pageSize": 1000,
        "userId": this.user_id
      }).then((result) => {
        let res = result.data
        if (res.code === 0) {
          if (res.data.list) {
            this.income_list = res.data.list
          }
        } else {
          this.$message.error(res.msg);
        }
      }).catch((err) => {
        this.$message.error(err);
      });
    },
    get_withdraw () {
      userWithdraw({
        "pageNum": 1,
        "pageSize": 1000,
        'status': 2,
        "userId": this.user_id
      }).then((result) => {
        let res = result.data
        if (res.code === 0) {
          if (res.data.list) {
            this.withdraw_list = res.data.list
          }
        } else {
          this.$message.error(res.msg);
        }
      }).catch((err) => {
        this.$message.error(err);
      });
    },
  },
  created () {
    if (this.$route.query.user_id) {

      this.user_id = this.$route.query.user_id
      this.get_detail()
    }
  }
}
</script>

<style lang="less" scoped>
.container {
  padding: 20px;
  .section {
    .title {
      width: 120px;
      height: 30px;
      background-color: #409eff;
      line-height: 30px;
      font-size: 16px;
      text-align: center;
      color: #fff;
      box-shadow: 1px 1px 30px rgba(0, 0, 0, 0.1);
      margin-bottom: 20px;
    }
    .info {
      margin-left: 40px;
      .list-item {
        margin-bottom: 20px;
        .tip {
          color: #409eff;
          font-size: 16px;
          display: inline-block;
          vertical-align: middle;
          width: 130px;
          text-align: right;
        }
        .detail {
          color: #666;
          font-size: 16px;
          display: inline-block;
          vertical-align: middle;
          .detail-btn {
            color: #409eff;
            font-size: 14px;
            display: inline-block;
            vertical-align: middle;
            margin-left: 30px;
            cursor: pointer;
          }
        }
      }
    }
  }
}
</style>

